import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AfMessageService } from '@core';
import { STColumn, STComponent } from '@delon/abc/st';
import { NzTimelineMode } from 'ng-zorro-antd/timeline';

import { CrabService } from '../crab.service';

@Component({
  selector: 'app-crab-growth',
  styleUrls: ['./growth.component.less'],
  templateUrl: './growth.component.html'
})
export class CrabGrowthComponent implements OnInit {
  rows: any[] = [];
  queryParams: any = { recordContent: '', beginDate: '', endDate: '' };
  url = '';
  req = { params: this.queryParams, lazyLoad: false };

  mode: NzTimelineMode = 'left';
  @ViewChild('st') private readonly st!: STComponent;
  columns: STColumn[] = [
    // { title: '记录日期', type: 'date', index: 'recordDate' },
    { title: '记录日期', index: 'formatDate' },
    { title: '标签列表', index: 'tagLabel' },
    { title: '记录内容', index: 'recordContent' },
    // { title: '扩展内容', index: 'extContent' },
    {
      title: '状态',
      type: 'badge',
      index: 'status',
      badge: {
        green: { text: '已完成', color: 'success' },
        red: { text: '告警或错误', color: 'warning' },
        blue: { text: '正在进行', color: 'processing' },
        gray: { text: '未完成或失效', color: 'default' }
      }
    },
    { title: '创建人', index: 'createdBy' },
    { title: '创建日期', type: 'date', index: 'createdDate' },
    {
      title: '操作',
      buttons: [
        {
          text: '编辑',
          icon: 'edit',
          tooltip: `修改记录内容`,
          click: record => {
            this.editRecord(record);
          }
        },
        {
          text: '删除',
          icon: 'delete',
          tooltip: `删除记录`,
          pop: {
            title: '您确定要删除记录吗？',
            okType: 'danger',
            icon: 'star'
          },
          click: record => {
            this.deleteRecord(record);
          }
        }
      ]
    }
  ];

  constructor(
    private crabSrv: CrabService,
    private fb: FormBuilder,
    private msgSrv: AfMessageService
  ) {
    this.url = this.crabSrv.getCrabGrowthUrl();
  }

  vform!: FormGroup;
  ngOnInit(): void {
    this.vform = this.fb.group({
      id: ['', []],
      recordDate: ['', [Validators.required]],
      recordContent: ['', [Validators.required]],
      extContent: ['', []],
      tagList: ['', [Validators.required]],
      status: ['blue', [Validators.required]]
    });

    this.query();
  }

  row: any[] = [];
  query() {
    console.log(JSON.stringify(this.queryParams));
    this.st.reset(this.queryParams);
    this.row = this.st._data;
  }

  drawer_visible = false;
  drawer_Title = '新建记录';
  drawer_close() {
    this.drawer_visible = false;
  }
  editRecord(record: any) {
    this.drawer_visible = true;
    this.drawer_Title = '修改记录';
    record.tagList = JSON.parse(record.tagList);
    this.vform.patchValue(record);
    console.log(record);
  }

  deleteRecord(record: any) {
    // console.log(record);
    this.crabSrv.deleteCrabGrowth(record.id).subscribe(res => {
      if (res.status) {
        this.query();
      } else {
        this.msgSrv.msg_error(res.msg);
      }
    });
  }

  addRecord() {
    this.drawer_visible = true;
    this.vform.reset();
    this.vform.patchValue({ status: 'blue', tagList: ['生活', '工作'] });
    this.drawer_Title = '新建记录';
    // console.log(record);
  }

  saveRecord() {
    // console.log(record);
    this.drawer_visible = false;
    const body = this.vform.getRawValue();
    body.tagList = JSON.stringify(body.tagList);
    this.crabSrv.saveCrabGrowth(body).subscribe(res => {
      if (res.status) {
        this.msgSrv.msg_success(res.msg);
        this.query();
      } else {
        this.msgSrv.msg_error(res.msg);
      }
    });
  }
}
